<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>总结Vue数据监测</title>
  <script src="../js/vue.js"></script>
</head>

<body>

  <!-- 
    Vue监视数据的原理：
        1.vue会监视data中所有层次的数据。

        2.如何监测对象中的数据?
            通过setter实现监视， 且要在new Vue时就传入要监测的数据。
                (1) .对象中后追加的属性， Vue默认不做响应式处理
                (2) .如需给后添加的属性做响应式， 请使用如下API：
                    Vue.set(target， property Name/index， value)或
                    vm.$set(target， property Name/index，value)

        3.如何监测数组中的数据?
            通过包裹数组更新元素的方法实现，本质就是做了两件事：
                (1).调用原生对应的方法对数组进行更新
                (2).重新解析模板，进而更新页面。
   
        4.在Vue修改数组中的某个元素一定要用如下方法
            1.使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
            2.Vue.set()或vm.$set()
        特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性!!
    -->

  <div id="root">
    <h1>学生信息</h1>
    <button @click="student.age++">年龄+1岁</button>
    <button @click="addSex">添加性别属性，默认值是：男</button>
    <button @click="student.sex = '未知' ">修改性别</button>
    <button @click.once="addFriend">在列表首位添加一个朋友</button>
    <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button>
    <button @click="addHobby">添加一个爱好</button>
    <button @click="updateFirstHobby">修改第一个爱好为：开车</button>
    <h3>姓名：{{student.name}}</h3>
    <h3 v-if="student.sex">性别：{{student.sex}}</h3>
    <h3>年龄：{{student.age}}</h3>
    <h3>爱好：</h3>
    <ul>
      <li v-for="(h, index) in student.hobby" :key="index">
        {{h}}
      </li>
    </ul>
    <h3>朋友：</h3>
    <ul>
      <li v-for="(f, index) in student.friends" :key="index">
        {{f.name}} -- {{f.age}}
      </li>
    </ul>
  </div>
  <script>
    Vue.config.productionTip = false
    new Vue({
      el: '#root',
      data: {
        student: {
          name: 'tom',
          age: 18,
          hobby: ['CY', 'HJ', 'TT'],
          friends: [
            { name: 'jerry', age: 35 },
            { name: 'tony', age: 36 }
          ]
        }
      },
      methods: {
        addSex() {
          // Vue.set(this.student, 'sex', '男')
          Vue.$set(this.student, 'sex', '男')
        },
        addFriend() {
          this.student.friends.unshift({ name: 'jack', age: 70 })
        },
        updateFirstFriendName() {
          this.student.friends[0].name = '张三'
        },
        addHobby() {
          this.student.hobby.push('XX')
        },
        updateFirstHobby() {
          // this.student.hobby.splice(0, 1, 'KC')
          // Vue.set(this.student.hobby, 0, 'KC')
          this.$set(this.student.hobby, 0, 'KC')
        }
      },
    })
  </script>
</body>

</html>